<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    append-to-body
    :close-on-click-modal="false"
    @close="closeDialog()"
    :visible="visible"
    width="500"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="120px"
    >
      <el-form-item label="系列名称" prop="brandCateName">
        <el-input
          v-model="dataForm.brandCateName"
          placeholder="请输入系列名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="原产地" prop="provenanceId">
        <el-select
          v-model="dataForm.provenanceId"
          filterable
          placeholder="请选择原产地"
          clearable
          size="small"
          class="margin-left-xs"
          style="width:100%"
        >
          <el-option
            v-for="dict in provenanceList"
            :key="dict.id"
            :label="dict.provenanceName"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="适用年龄段" prop="usedAge">
        <el-input
          v-model="dataForm.usedAge"
          placeholder="请输入适用年龄段"
        ></el-input>
      </el-form-item>
      <el-form-item label="销售地" prop="saleAddress">
        <el-input
          v-model="dataForm.saleAddress"
          placeholder="请输入销售地"
        ></el-input>
      </el-form-item>
      <el-form-item label="包装种类" prop="packageCate">
        <el-input
          v-model="dataForm.packageCate"
          placeholder="请输入包装种类"
        ></el-input>
      </el-form-item>
      <el-form-item label="单罐净容量" prop="singlePackageCapacity">
        <el-input
          v-model="dataForm.singlePackageCapacity"
          placeholder="请输入单罐净容量"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit"
        >确定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { getObj, addObj, putObj } from "@/api/shop_goods/brand_cate";
import {goodsProvenanceList} from '@/api/shop_goods/provenance'

export default {
  props:{
    visible: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      canSubmit: false,
      dataForm: {},
      dataRule: {
        brandCateName: [
          { required: true, message: "系列名称不能为空", trigger: "blur" },
        ],
        provenanceId: [
          { required: true, message: "原产地不能为空", trigger: "blur" },
        ],
      },

      // 原产地列表
      provenanceList:[]
    };
  },
  methods: {
    init(brandId, id) {
      this.canSubmit = true;
      this.dataForm.brandId = brandId
      this.goodsProvenanceList()
      if(id){
        getObj(id).then((response) => {
          this.dataForm = response.data.data;
        });
      }
      
    },

    /**
     * 获取原产地列表
     */
    goodsProvenanceList(){
      goodsProvenanceList().then(res=>{
        this.provenanceList = res.data.data
      })
    },

    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.canSubmit = false;
          if (this.dataForm.id) {
            putObj(this.dataForm)
              .then((data) => {
                this.$notify.success("修改成功");
                this.$emit("refreshDetailDataList");
                this.closeDialog()
              })
              .catch(() => {
                this.canSubmit = true;
              });
          } else {
            addObj(this.dataForm)
              .then((data) => {
                this.$notify.success("添加成功");
                this.$emit("refreshDetailDataList");
                this.closeDialog()
              })
              .catch(() => {
                this.canSubmit = true;
              });
          }
        }
      });
    },
    //重置表单
    closeDialog() {
      this.$emit('update:visible', false)
    },
  },
};
</script>